<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>航次政府补贴</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="pageContentWhole">
      <a-row :gutter="[16]">
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="船名">
              <!-- <a-select v-model="searchForm.shipId" class="selectWidth">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in shipNameList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select> -->
              <a-input v-model="searchForm.shipName"></a-input>
            </a-form-item>
            <a-form-item label="航次">
              <a-input v-model="searchForm.voyageNumber"></a-input>
            </a-form-item>
            <a-form-item label="年月">
              <a-range-picker :mode="['month', 'month']" :placeholder="['请选择开始年月', '请选择结束年月']"
                format="YYYY-MM" :open="isopen" :value="dateT"
                @change="onchange1"
                @openChange="onOpenChange" @panelChange="onPanelChange">
                <a-icon slot="suffixIcon" type="calendar" />
                <template slot="renderExtraFooter">
                  <a-button type="primary" size="small" @click="chooseDate">确定</a-button>
                  <a-button type="primary" ghost size="small" @click="cancelChooseDate">取消</a-button>
                </template>
              </a-range-picker>
            </a-form-item>
            <a-form-item label="收款账户">
              <a-input-group compact>
                <a-tree-select class="selectWidth"
                  v-model="searchForm.deptId"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :load-data="onLoadData"
                  :tree-data="deptTreeData"
                  @select="onChangeDept"
                >
                </a-tree-select>
                <a-select v-model="searchForm.capitalAccountId" class="selectInputWidth">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option
                    v-for="(item,index) in capitalAccountList0"
                    :key="index"
                    :value="item.id"
                  >{{item.account}}</a-select-option>
                </a-select>
              </a-input-group>
            </a-form-item>
            <a-form-item label="录入日期">
              <a-range-picker @change="onChange"><a-icon slot="suffixIcon" type="calendar" /></a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="addItem">+  创建航次补贴</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-item>
          </a-form>

          <a-card style="" class="govern_shujutz">
            <a-col  class="assent" style="margin: 5px 0; width: 205px; float: left;">
              <div class="assent_mes">总应收</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalReceivableAmount||'--'}}</div>
            </a-col>
            <a-col  class="assent" style="margin: 5px 0;  width: 205px; float: left;">
              <div class="assent_mes">总实收</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalReceivedAmount||'--'}}</div>
            </a-col>
            <a-col  class="assent" style="margin: 5px 0;  width: 205px; float: left;">
              <div class="assent_mes">总应收徐州</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXZReceivableAmount||'--'}}</div>
            </a-col>
            <a-col class="assent" style="margin: 5px 0; width: 205px; float: left;">
              <div class="assent_mes">总实收徐州</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXZReceivedAmount||'--'}}</div>
            </a-col>
            <a-col class="assent" style="margin: 5px 0;  width: 205px; float: left;">
              <div class="assent_mes">总应收新沂</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXYReceivableAmount||'--'}}</div>
            </a-col>
            <a-col class="assent"  style="margin: 5px 0;  width: 205px; float: left;">
              <div class="assent_mes">总实收新沂</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXYReceivedAmount||'--'}}</div>
            </a-col>
            <a-col  class="assent" style="margin: 5px 0; width: 205px; float: left;">
              <div class="assent_mes">总应付徐州交控港务</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXZPayableAmount ||'--'}}</div>
            </a-col>
            <a-col style="margin: 5px 0; width: 205px; float: left;">
              <div class="assent_mes">总实付徐州交控港务</div>
              <div class="assent_shu">{{shipVoyageStatistics.totalXZPayactualAmount ||'--'}}</div>
            </a-col>
          </a-card>

          <a-table :columns="columns" :data-source="tableData" :loading="loading" class="tableMargin"
           :pagination="pagination"
           :scroll="{x: 1920}"
            rowKey="id">
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
                <a @click="editIt(record)">编辑</a>
                <a @click="editIt(record, true)">查看</a>
              </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <!-- 添加/编辑 -->
    <a-modal :visible="visible" :title="title" :confirmLoading="confirmLoading" width="720px"
      :destroyOnClose="true" :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      >
      <a-form-model
        ref="rulesForm"
        :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
        :rules="rules">
        <a-form-model-item label="年月" prop="yearAndMonth">
          <a-month-picker :value="month" @change="onChangeMonth" :disabled="disabled"><a-icon slot="suffixIcon" type="calendar" /></a-month-picker>
        </a-form-model-item>
        <a-form-model-item label="选择船舶" prop="shipName">
          <!-- <a-select v-model="form.shipId" @change="(v) => {queryVoyageNumber({shipId: v})}" :disabled="disabled" class="selectWidth">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in shipNameList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select> -->
          <a-input v-model="form.shipName" :disabled="disabled" :max-length="30"></a-input>
        </a-form-model-item>
        <a-form-model-item label="选择航次" prop="voyageNumber">
          <!-- <a-select v-model="form.voyageId" @change="selectVoyage" :disabled="disabled" class="selectWidth">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in voyageNumberList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select> -->
          <a-input v-model="form.voyageNumber" :disabled="disabled" :max-length="30"></a-input>
        </a-form-model-item>
        <a-form-model-item label="航线" prop="routeName">
          <a-input v-model="form.routeName" :disabled="disabled" :max-length="30"></a-input>
        </a-form-model-item>

        <a-row>
          <!-- <a-col :offset="1" :span="22" style="margin-bottom: 18px;" class="zhengf_bt" >
            <a-steps progress-dot size="small">
              <a-step
                v-for="(item,index) in routeNameDisplay"
                :key="index"
                :title="item"
                status="finish"
              />
            </a-steps>
          </a-col> -->

          <!-- 徐州 -->
          <a-col :span="24">
            <div class="borderframe">
              <div class="border">
                <a-col :span="3">
                  <h2 class="leftPosition">徐州</h2>
                </a-col>
                <a-col :span="21">
                  <a-form-model-item label="应收徐州" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xzReceivableAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="实收徐州" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xzReceivedAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="收款账户" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-tree-select style="width: 40%" :treeDefaultExpandAll="treeDefaultExpandAll" :disabled="disabled"
                        v-model="form.xzDeptId"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :load-data="onLoadData"
                        :tree-data="deptTreeDataModal"
                        @select="onChangeDept1"
                      >
                      </a-tree-select>
                      <a-select v-model="form.xzCapitalAccountId" :disabled="disabled" style="width: 60%">
                        <a-select-option value>请选择</a-select-option>
                        <a-select-option
                          v-for="(item,index) in capitalAccountList1"
                          :key="index"
                          :value="item.id"
                        >{{item.account}}</a-select-option>
                      </a-select>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-select v-model="form.xzIsInvoice" @change="() => {form.xzInvoiceNo = ''}" :disabled="disabled" style="width: 40%">
                        <a-select-option :key="0">未开票</a-select-option>
                        <a-select-option :key="1">已开票</a-select-option>
                      </a-select>
                      <a-input v-if="form.xzIsInvoice===1" v-model="form.xzInvoiceNo" :disabled="disabled" style="width: 60%"></a-input>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票抬头" :wrapperCol="{span: 18}">
                    <a-input v-model="form.xzInvoiceTitle" :disabled="disabled"></a-input>
                  </a-form-model-item>
                </a-col>
              </div>
            </div>
          </a-col>

          <!-- 新沂 -->
          <a-col :span="24" style="margin-top: 10px">
            <div class="borderframe">
              <div class="border">
                <a-col :span="3">
                  <h2 class="leftPosition">新沂</h2>
                </a-col>
                <a-col :span="21">
                  <a-form-model-item label="应收新沂" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xyReceivableAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="实收新沂" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xyReceivedAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="收款账户" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-tree-select style="width: 40%" :treeDefaultExpandAll="treeDefaultExpandAll" :disabled="disabled"
                        v-model="form.xyDeptId"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :load-data="onLoadData"
                        :tree-data="deptTreeDataModal"
                        @select="onChangeDept2"
                      >
                      </a-tree-select>
                      <a-select v-model="form.xyCapitalAccountId" :disabled="disabled" style="width: 60%">
                        <a-select-option value>请选择</a-select-option>
                        <a-select-option
                          v-for="(item,index) in capitalAccountList2"
                          :key="index"
                          :value="item.id"
                        >{{item.account}}</a-select-option>
                      </a-select>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-select v-model="form.xyIsInvoice" @change="() => {form.xyInvoiceNo = ''}" :disabled="disabled" style="width: 40%">
                        <a-select-option :key="0">未开票</a-select-option>
                        <a-select-option :key="1">已开票</a-select-option>
                      </a-select>
                      <a-input v-if="form.xyIsInvoice===1" v-model="form.xyInvoiceNo" :disabled="disabled" style="width: 60%"></a-input>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票抬头" :wrapperCol="{span: 18}">
                    <a-input v-model="form.xyInvoiceTitle" :disabled="disabled"></a-input>
                  </a-form-model-item>
                </a-col>
              </div>
            </div>
          </a-col>

          <!-- 徐州交控港务 -->
          <a-col :span="24" style="margin-top: 10px">
            <div class="borderframe">
              <div class="border">
                <a-col :span="3">
                  <h2 class="leftPosition">徐州<br/>交控<br/>港务</h2>
                </a-col>
                <a-col :span="21">
                  <a-form-model-item label="应付" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xzPayableAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="实付" :wrapperCol="{span: 18}">
                    <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.xzPayactualAmount" :disabled="disabled" style="width: 100%"></a-input-number>
                  </a-form-model-item>
                  <a-form-model-item label="付款账户" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-tree-select style="width: 40%" :treeDefaultExpandAll="treeDefaultExpandAll" :disabled="disabled"
                        v-model="form.xzPayDeptId"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :load-data="onLoadData"
                        :tree-data="deptTreeDataModal"
                        @select="onChangeDept3"
                      >
                      </a-tree-select>
                      <a-select v-model="form.xzPayAccountId" :disabled="disabled" style="width: 60%">
                        <a-select-option value>请选择</a-select-option>
                        <a-select-option
                          v-for="(item,index) in capitalAccountList3"
                          :key="index"
                          :value="item.id"
                        >{{item.account}}</a-select-option>
                      </a-select>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票" :wrapperCol="{span: 18}">
                    <a-input-group compact>
                      <a-select v-model="form.xzPayIsInvoice" @change="() => {form.xzPayInvoiceNo = ''}" :disabled="disabled" style="width: 40%">
                        <a-select-option :key="0">未开票</a-select-option>
                        <a-select-option :key="1">已开票</a-select-option>
                      </a-select>
                      <a-input v-if="form.xzPayIsInvoice===1" v-model="form.xzPayInvoiceNo" :disabled="disabled" style="width: 60%"></a-input>
                    </a-input-group>
                  </a-form-model-item>
                  <a-form-model-item label="发票抬头" :wrapperCol="{span: 18}">
                    <a-input v-model="form.xzPayInvoiceTitle" :disabled="disabled"></a-input>
                  </a-form-model-item>
                </a-col>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { queryShipNameList, queryVoyageNumberList } from '@/api'
import { commonExport } from '@/api/request'
import { queryDeptList } from '@/api/systemPersonnelManage'
import {queryShipVoyageSubsidy, queryCapitalAccountSelectList, addShipVoyageSubsidy, updateShipVoyageSubsidy} from '@/api/financialCenter'

const fomrMessage = `必填项不能为空`

const defaultForm = () => {
  return {
    id: null, // 航次补贴id
    shipId: '', // 船舶id
    shipName: '',
    yearAndMonth: '', // 年月
    voyageId: '', // 航次id
    voyageNumber: '',
    routeName: '',
    xzReceivableAmount: '', // 应收徐州
    xzReceivedAmount: '', // 实收徐州
    xzDeptId: '', // 徐州账户所属公司id
    xzCapitalAccountId: '', // 徐州账户id
    xzIsInvoice: 0, // 开票（徐州），1是
    xzInvoiceNo: '', // 徐州发票号
    xzInvoiceTitle: '', // 徐州发票抬头
    xyReceivableAmount: '', // 应收新沂
    xyReceivedAmount: '', // 实收新沂
    xyIsInvoice: 0, // 开票（新沂），1是
    xyDeptId: '', // 新沂账户所属公司id
    xyCapitalAccountId: '', // 新沂账户id
    xyInvoiceNo: '', // 新沂发票号
    xyInvoiceTitle: '', // 新沂发票抬头
    xzPayableAmount: '',
    xzPayactualAmount: '',
    xzPayIsInvoice: 0,
    xzPayDeptId: '',
    xzPayAccountId: '',
    xzPayInvoiceNo: '',
    xzPayInvoiceTitle: ''
  }
}

export default {
  data () {
    const columns = [
      {
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      },
      {
        title: '年月',
        width: 90,
        dataIndex: 'yearAndMonth'
      },
      {
        title: '船名',
        dataIndex: 'shipName',
        ellipsis: true
      },
      {
        title: '航次',
        dataIndex: 'voyageNumber',
        ellipsis: true
      },
      {
        title: '航线',
        dataIndex: 'routeName',
        width: 190,
        ellipsis: true
      },
      {
        title: '应收徐州',
        dataIndex: 'xzReceivableAmount',
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '实收徐州',
        dataIndex: 'xzReceivedAmount',
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '发票',
        dataIndex: 'xzIsInvoice',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="已开"/>
          } else if (text === 0) {
            return <a-badge status="error" text="未开"/>
          }
        }
      },
      {
        title: '应收新沂',
        dataIndex: 'xyReceivableAmount',
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '实收新沂',
        dataIndex: 'xyReceivedAmount',
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '录入日期',
        dataIndex: 'createTime'
      },
      {
        title: '发票',
        dataIndex: 'xyIsInvoice',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="已开"/>
          } else if (text === 0) {
            return <a-badge status="error" text="未开"/>
          }
        }
      },
      {
        title: '应付徐州交控港务',
        dataIndex: 'xzPayableAmount',
        width: 190,
        ellipsis: true,
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '实付徐州交控港务',
        dataIndex: 'xzPayactualAmount',
        width: 190,
        ellipsis: true,
        customRender: (text, row, index) => {
          return text || '--'
        }
      },
      {
        title: '发票',
        dataIndex: 'xzPayIsInvoice',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="已开"/>
          } else if (text === 0) {
            return <a-badge status="error" text="未开"/>
          }
        }
      },
      {
        title: '操作',
        width: 120,
        fixed: 'right',
        scopedSlots: {customRender: 'operation'}
      }
    ]

    return {
      shipNameList: [],
      voyageNumberList: [],
      deptTreeData: [],
      capitalAccountList0: [],
      capitalAccountList1: [],
      capitalAccountList2: [],
      capitalAccountList3: [],
      deptTreeDataModal: [],
      isopen: false,
      searchForm: {
        // shipId: '',
        shipName: '',
        voyageNumber: '',
        startYearAndMonth: '',
        endYearAndMonth: '',
        searchStartTime: '',
        searchEndTime: '',
        deptId: '',
        capitalAccountId: ''
      },
      dateT: null,
      startYearAndMonthT: '', // 年月1 缓存
      endYearAndMonthT: '', // 年月2 缓存
      columns,
      tableData: [],
      shipVoyageStatistics: {},
      loading: false,
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // modal
      disabled: false,
      labelCol: {span: 6},
      wrapperCol: {span: 14},
      visible: false,
      title: '',
      confirmLoading: false,
      form: defaultForm(),
      routeNameDisplay: [],
      treeDefaultExpandAll: false,
      month: null,
      rules: {
        // shipId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        voyageNumber: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        yearAndMonth: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        routeName: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        shipName: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}]
      }
    }
  },
  methods: {
    shipNameListRequest (e) {
      queryShipNameList(e)
        .then(res => {
          this.shipNameList = res.data
        })
        .catch(rs => {})
    },
    queryVoyageNumber (e, voyageid) {
      queryVoyageNumberList(e)
        .then(res => {
          this.voyageNumberList = res.data
          if (voyageid) this.selectVoyage(voyageid)
        })
        .catch(rs => {})
    },
    selectVoyage (id) {
      const t = this.voyageNumberList
      let route = t.filter(v => v.id === id)[0].routeName
      if (route) {
        this.routeNameDisplay = route.split('-')
      } else {
        this.routeNameDisplay = []
      }
    },
    queryCapitalAccount (e, i) {
      queryCapitalAccountSelectList(e)
        .then(res => {
          this[`capitalAccountList${i}`] = res.data
        })
        .catch(rs => {})
    },
    onChangeDept (deptId) {
      if (deptId) this.queryCapitalAccount({deptId}, 0)
      else this.capitalAccountList0 = []
    },
    onChangeDept1 (deptId) {
      if (deptId) this.queryCapitalAccount({deptId}, 1)
      else this.capitalAccountList1 = []
    },
    onChangeDept2 (deptId) {
      if (deptId) this.queryCapitalAccount({deptId}, 2)
      else this.capitalAccountList2 = []
    },
    onChangeDept3 (deptId) {
      if (deptId) this.queryCapitalAccount({deptId}, 3)
      else this.capitalAccountList3 = []
    },
    // 月份范围选择
    onOpenChange () {
      this.isopen = true
    },
    onchange1 (v) {
      if (v.length === 0) {
        this.dateT = null
        this.searchForm.startYearAndMonth = ''
        this.searchForm.endYearAndMonth = ''
      }
    },
    chooseDate () {
      this.isopen = false
      this.dateT = [this.startYearAndMonthT, this.endYearAndMonthT]
      this.searchForm.startYearAndMonth = this.startYearAndMonthT.format('YYYY-MM')
      this.searchForm.endYearAndMonth = this.endYearAndMonthT.format('YYYY-MM')
    },
    cancelChooseDate () {
      this.isopen = false
    },
    onPanelChange (v, m) {
      this.startYearAndMonthT = v[0]
      this.endYearAndMonthT = v[1]
    },
    // 录入日期
    onChange (data, dateString) {
      this.searchForm.searchStartTime = dateString[0]
      this.searchForm.searchEndTime = dateString[1]
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptList({parentId: treeNode.dataRef.key}).then(rsp => {
          let childrenData = []
          rsp.data.forEach((value) => {
            childrenData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId,
              isLeaf: true
            })
          })
          treeNode.dataRef.children = childrenData
          this.deptTreeData = [...this.deptTreeData]
          this.deptTreeDataModal = [...this.deptTreeDataModal]
          resolve()
        })
      })
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryShipVoyageSubsidy({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.voyageSubsidyList.list
        this.shipVoyageStatistics = rsp.data.shipVoyageStatistics || {}
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.voyageSubsidyList.pageSize,
          total: rsp.data.voyageSubsidyList.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.voyageSubsidyList.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    onChangeMonth (date, dateStr) {
      if (date) {
        this.form.yearAndMonth = date.startOf('month').format('YYYY-MM')
      } else {
        this.form.yearAndMonth = ''
      }
      this.month = date
    },
    // 添加
    addItem () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.disabled = false
      this.form = defaultForm()
      this.month = null
      this.routeNameDisplay = []
      this.treeDefaultExpandAll = false
      this.title = '创建航次补贴'
      this.visible = true
    },
    // 编辑
    editIt (item, disabled) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.disabled = disabled
      item.xzDeptId = item.xzDeptId || ''
      item.xyDeptId = item.xyDeptId || ''
      item.xzCapitalAccountId = item.xzCapitalAccountId || ''
      item.xyCapitalAccountId = item.xyCapitalAccountId || ''
      this.form = {...item}
      this.treeDefaultExpandAll = true
      this.month = moment(item.yearAndMonth)
      // 初始化下拉
      // this.queryVoyageNumber({shipId: item.shipId}, item.voyageId)
      this.onChangeDept1(item.xzDeptId)
      this.onChangeDept2(item.xyDeptId)

      this.title = '编辑航次补贴'
      this.visible = true
    },
    handleOk () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (!this.form.id) {
            addShipVoyageSubsidy(this.form).then(rsp => {
              this.$message.success('添加成功')
              this.visible = false
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          } else {
            updateShipVoyageSubsidy(this.form).then(rsp => {
              this.$message.success('编辑成功')
              this.visible = false
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          }
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    excelExport () {
      commonExport('/bill/exportShipVoyageSubsidy', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: [
          {
            title: '年月',
            dataIndex: 'yearAndMonth'
          },
          {
            title: '船名',
            dataIndex: 'shipName'
          },
          {
            title: '航次',
            dataIndex: 'voyageNumber'
          },
          {
            title: '航线',
            dataIndex: 'routeName'
          },
          {
            title: '应收徐州',
            dataIndex: 'xzReceivableAmount'
          },
          {
            title: '实收徐州',
            dataIndex: 'xzReceivedAmount'
          },
          {
            title: '收款银行',
            dataIndex: 'xzCompanyName'
          },
          {
            title: '收款账户',
            dataIndex: 'xzAccount'
          },
          {
            title: '发票',
            dataIndex: 'xzIsInvoiceName'
          },
          {
            title: '发票号',
            dataIndex: 'xzInvoiceNo'
          },
          {
            title: '应收新沂',
            dataIndex: 'xyReceivableAmount'
          },
          {
            title: '实收新沂',
            dataIndex: 'xyReceivedAmount'
          },
          {
            title: '收款银行',
            dataIndex: 'xyCompanyName'
          },
          {
            title: '收款账户',
            dataIndex: 'xyAccount'
          },
          {
            title: '发票',
            dataIndex: 'xyIsInvoiceName'
          },
          {
            title: '发票号',
            dataIndex: 'xyInvoiceNo'
          },
          {
            title: '应付徐州交控港务',
            dataIndex: 'xzPayableAmount'
          },
          {
            title: '实付徐州交控港务',
            dataIndex: 'xzPayactualAmount'
          },
          {
            title: '发票',
            dataIndex: 'xzPayIsInvoiceName'
          },
          {
            title: '录入日期',
            dataIndex: 'createTime'
          }
        ]
      })
    }
  },
  mounted () {
    // this.shipNameListRequest({})
    queryDeptList({parentId: 0}).then(rsp => {
      let initData = [{
        title: '全部',
        key: '',
        value: '',
        isLeaf: true
      }]
      const p = rsp.data[0]
      queryDeptList({parentId: p.deptId}).then(rsp => {
        let childrenData = []
        rsp.data.forEach((value) => {
          childrenData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId,
            isLeaf: true
          })
        })
        initData.push({
          title: p.name,
          key: p.deptId,
          value: p.deptId,
          children: childrenData
        })

        this.deptTreeData = [...initData]
        this.searchForm.deptId = this.deptTreeData[0].key
        this.handleSubmit()

        // 弹窗的
        initData.splice(0, 1, {
          title: '请选择账户所属公司',
          key: '',
          value: '',
          isLeaf: true
        })
        this.deptTreeDataModal = [...initData]
      })
    })
  }
}
</script>

<style lang="less" scoped>
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 25px;

    .border {
      padding: 24px;
      border-top: 1px solid #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
    }

    .leftPosition {
      height: 305px;
      line-height: 35px;
      padding-top: 105px;
      border-right: 1px solid #f0f0f0;
    }
  }
</style>
<style>
.zhengf_bt .ant-steps-dot.ant-steps-small .ant-steps-item-tail{ width: 100%;}
.zhengf_bt .ant-steps-dot.ant-steps-small .ant-steps-item-icon{ margin-left: 67px;}
.govern_shujutz{ text-align:center; margin-top:24px; overflow-x: scroll;}
.govern_shujutz .ant-card-body{ width: 1688px;}
</style>
